<template>
  <div class="detailPageCss">
    <div class="bodyCss">
      <div class="bodyTitleCss">医疗机构依法执业自查自纠结果报告单</div>
      <div class="bodySecondTitleCss">机构名称：</div>
      <div class="customTableCss">
        <table border="1">
          <tbody>
            <tr>
              <td class="tableLabelCss">报告类型</td>
              <td colspan="2">
                <div class="tableCheckCss">
                  <div>☑临时报告</div>
                  <div>☐季度报告</div>
                  <div>☐年度报告</div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="tableLabelCss">自查类型</td>
              <td colspan="2">
                <div class="tableCheckCss">
                  <div>☑日常自查</div>
                  <div>☐专项自查</div>
                  <div>☐全面自查</div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="tableLabelCss">自查项目</td>
              <td class="tableLabelCss">发现问题</td>
              <td class="tableLabelCss">整改情况</td>
            </tr>
            <tr>
              <td class="tableValueCss">项目一</td>
              <td class="tableValueCss">问题内容</td>
              <td class="tableValueCss">已完成整改</td>
            </tr>
            <tr v-for="(item , index) in 4" :key="index">
              <td class="tableEmptyCss">{{index}}</td>
              <td class="tableEmptyCss">{{index}}</td>
              <td class="tableEmptyCss">{{index}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  mounted(){
  },
  methods:{
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .bodyCss{
    overflow-y: auto;
    height: calc( 100% - 140px );
    margin-top: 40px;
    padding: 0 25%;
    padding-bottom: 20px;
    .bodyTitleCss{
      text-align: center;
      font-size: 2rem;
      font-weight: bold;
    }
    .bodySecondTitleCss{
      margin-top: 20px;
      margin-left: 14px;
      font-size: 18px;
    }
    .customTableCss{
      margin-top: 10px;
      table {
        border-collapse: collapse;
        width: 100%;
        line-height: 34px;
        .tableCheckCss{
          display: flex;
          justify-content: space-around;
        }
        .tableLabelCss{
          font-weight: bold;
        }
        .tableValueCss{
          font-size: 12px;
        }
        .tableEmptyCss{
          opacity: 0;
        }
      }
      th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      tr:last-child td {
        border-bottom: none;
      }
      td:nth-child(2) {
        border-right: none;
      }
    }
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
} 
</style>